<template>
    <view class="page" :style="{ '--color': color }">
        <navBar title="线下实体卡兑换" :isBack="fromShare == 1 ? false : true"></navBar>

        <view class="container">
            <view class="content-wrapper">
                <!-- 顶部卡图 -->
                <view class="card-img-box">
                    <image :src="$imgUrls(pageData.background)" mode="aspectFill" class="card-img"></image>
                </view>

                <!-- 信息区域 -->
                <view class="info-box">
                    <view class="row">
                        <text class="label">权益卡名：</text>
                        <text class="value">{{ pageData.name }}</text>
                    </view>

                    <view class="row">
                        <text class="label">制卡时间：</text>
                        <text class="value">{{ pageData.TCOC && pageData.TCOC.add_time }}</text>
                    </view>

                    <!-- 已领取显示领取人信息 -->
                    <view v-if="pageData.TCOC && pageData.TCOC.state == 1 && pageData.user_info" class="receiver-box">
                        <view class="row">
                            <text class="label">领取人：</text>
                        </view>
                        <view class="receiver">
                            <image v-if="pageData.user_info.v_headimg" :src="$imgUrls(pageData.user_info.v_headimg)" mode="aspectFill" class="avatar"></image>
                            <view class="receiver-info">
                                <text class="receiver-name">
                                    {{ pageData.user_info.v_name || pageData.user_info.v_name }}
                                </text>
                                <text class="receiver-tel">
                                    {{ pageData.user_info.v_tel || pageData.user_info.v_tel }}
                                </text>
                            </view>
                        </view>
                    </view>

                    <!-- 使用 / 领取时间 -->
                    <view class="row">
                        <text class="label">领取时间：</text>
                        <text class="value" v-if="pageData.TCOC && pageData.TCOC.state == 1">
                            {{ pageData.TCOC.used_time }}
                        </text>
                        <text class="value" v-else>待领取</text>
                    </view>

                    <!-- 未领取按钮 -->
                    <view v-if="pageData.TCOC && pageData.TCOC.state == 0" class="btn-group">
                        <button class="btn btn-gray" @click="handleNoUse">暂不使用</button>
                        <button class="btn btn-green" @click="handleReceive">立即领取</button>
                    </view>

                    <!-- 已领取按钮 -->
                    <view v-else-if="pageData.TCOC && pageData.TCOC.state == 1" class="btn-group single">
                        <button class="btn btn-gray disabled">已领取</button>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部链接 -->
        <view class="footer">
            <view class="link" @click="toCardBag">我的卡包</view>
            <contact></contact>
        </view>

        <showModel @cancelFunc="closeModel" goHome="0" v-if="showModal" type="2"></showModel>
    </view>
</template>

<script>
    import { mapState, mapMutations } from 'vuex';
    export default {
        data() {
            return {
                fromShare: 0,
                showModal: false,
                headImg: 'https://msraimgcdn.mogoie.com/6144/1759194274346.jpg',
                ocId: '', // 19504 19503
                pageData: ''
            };
        },
        onLoad(opt) {
            if (opt.ocId) this.ocId = opt.ocId;
            if (opt.fromShare) this.fromShare = opt.fromShare;
            this.getTCOCInfo();
        },
        methods: {
            ...mapMutations(['getUser']),
            getTCOCInfo() {
                this.$showLoading('');
                this.$http
                    .post({
                        url: '/TimeCardApi/getTCOCInfo',
                        data: {
                            ocId: this.ocId
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data;
                        this.pageData = result;
                        if (result.share_user_info) {
                            this.getUser({
                                share_v_id: result.share_user_info.v_id
                            });
                        }
                    });
            },
            // 暂不使用
            handleNoUse() {
                this.$common.backHome();
            },
            // 立即领取
            async handleReceive() {
                if (!this.vid) return (this.showModal = true);
                if (!this.pageData || !this.pageData.TCOC) return;
                const Result = await this.$Modals('提示', '您确定要领取吗？');
                if (!Result) return;

                this.$showLoading('');
                this.$http
                    .post({
                        url: '/TimeCardApi/exchangeOfflineCard',
                        data: {
                            card_passwd: this.pageData.TCOC.card_passwd,
                            verify_passwd: this.pageData.TCOC.verify_passwd,
                            ocId: this.ocId,
                            type: 2 // 1查询 2兑换
                        }
                    })
                    .then((res) => {
                        this.$hideLoading();
                        if (res.code != 200) return this.$Toast(res.msg);
                        // 领取成功后刷新详情
                        this.getTCOCInfo();
                    });
            },
            // 我的卡包
            toCardBag() {
                if (!this.vid) return (this.showModal = true);
                this.toUrl('/subCard/cardBags');
            },
            closeModel() {
                this.showModal = false;
                this.getTCOCInfo();
            }
        },
        computed: {
            ...mapState(['color', 'share', 'vid'])
        }
    };
</script>

<style lang="scss" scoped>
    .page {
        min-height: 100vh;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .container {
        padding: 20rpx 30rpx 40rpx;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .content-wrapper {
        flex: 1;
    }

    .card-img-box {
        background-color: #ffffff;
        border-radius: 20rpx;
        overflow: hidden;
        margin-bottom: 24rpx;
    }

    .card-img {
        width: 100%;
        height: 360rpx;
        display: block;
    }

    .info-box {
        background-color: #ffffff;
        border-radius: 20rpx;
        padding: 24rpx 30rpx 100rpx;
    }

    .row {
        margin-bottom: 40rpx;
        display: flex;
        flex-direction: column;
    }

    .label {
        font-size: 26rpx;
        color: #666666;
        margin-bottom: 12rpx;
    }

    .value {
        font-size: 30rpx;
        color: #111111;
    }

    .receiver-box {
        margin-top: 10rpx;
        margin-bottom: 40rpx;
        .row {
            margin-bottom: 10rpx;
        }
    }

    .receiver {
        display: flex;
        align-items: center;
    }

    .avatar {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        margin-right: 16rpx;
    }

    .receiver-info {
        display: flex;
        flex-direction: column;
    }

    .receiver-name {
        font-size: 28rpx;
        color: #111111;
    }

    .receiver-tel {
        margin-top: 4rpx;
        font-size: 26rpx;
        color: #666666;
    }

    .btn-group {
        margin-top: 80rpx;
        display: flex;
        justify-content: space-between;
    }

    .btn-group.single {
        justify-content: center;
    }

    .btn {
        flex: 1;
        height: 76rpx;
        line-height: 76rpx;
        font-size: 30rpx;
        border-radius: 40rpx;
        margin: 0 10rpx;
    }

    .btn-gray {
        background-color: #f2f2f2;
        color: #999999;
    }

    .btn-gray.disabled {
        background-color: #dfdfdf;
        color: #ffffff;
    }

    .btn-green {
        background-color: var(--color);
        color: #ffffff;
    }

    .footer {
        padding: 40rpx 0 30rpx;
        text-align: center;
        font-size: 26rpx;
        color: #666666;
    }

    .link {
        color: var(--color);
    }

    .support {
        color: #999999;
    }
</style>
